<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件等</title>
    <style>
        #dom1 {
            width: 100px;
            height: 100px;
            background-color: rgba(184, 233, 154, 1);
        }

        #dom2 {
            position: absolute;
            left: 200px;
            top: 300px;
            width: 100px;
            height: 100px;
            background-color: rgb(233, 154, 229);
        }

        #list {
            display: none;
            position: fixed;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 70px;
            background-color: rgba(139, 135, 135, .6);
        }

        #list li {
            line-height: 40px;
            height: 40px;
            text-align: center;
            cursor: pointer;
        }

        #list li:hover {
            background-color: rgba(139, 135, 135, 1);
        }
    </style>
</head>

<body>
    <div id="dom1"></div>
    <div id="dom2"></div>

    <ul id="list">
        <li>复制</li>
        <li>粘贴</li>
        <li>赋值</li>
        <li>剪切</li>
    </ul>
</body>
<script>
    let dom1 = document.getElementById('dom1')
    let list = document.getElementById('list')
    document.onclick = () => {
        list.style.display = 'none'
    }
    dom1.ondblclick = () => {
        console.log('dblclick');
    }
    // 修改鼠标右击的属性
    dom1.oncontextmenu = (e) => {
        e = e || window.event
        e.preventDefault(); //阻止默认右击事件

        list.style.display = 'block'
        list.style.left = e.clientX + 'px'
        list.style.top = e.clientY + 'px'
    }

    dom1.onmousemove = () => {
        console.log('mousemove');
    }
    dom1.onmousedown = () => {
        console.log('mousedown');
    }
    dom1.onmouseup = () => {
        console.log('mouseup');
    }
    //不支持冒泡
    dom1.onmouseenter = () => {
        console.log('mouseenter');
    }
    dom1.onmouseleave = () => {
        console.log('mouseleave');
    }
    //支持冒泡
    dom1.onmouseover = () => {
        console.log('onmouseover');
    }
    dom1.onmouseout = () => {
        console.log('onmouseout');
    }


    //移动端事件----f12移动端模式模拟运行
    let dom2 = document.getElementById('dom2')
    dom2.ontouchstart = function () {
        console.log('开始触摸屏幕');
    }
    dom2.ontouchend = function () {
        console.log('结束触摸屏幕');
    }
    dom2.ontouchmove = function () {
        console.log('手指滑动屏幕');
    }
</script>

</html>